﻿<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Modal</title>
		<link rel="shortcut icon" type="image/x-icon" href="Vertical/favicon.ico">
		<!-- google font -->
		<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet" type="text/css" />
		<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
		<link href="assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">
		<link href="assets/css/ionicons.css" rel="stylesheet" type="text/css">
		<link href="assets/css/simple-line-icons.css" rel="stylesheet" type="text/css">
		<link href="assets/css/jquery.mCustomScrollbar.css" rel="stylesheet">
		<link href="assets/css/style.css" rel="stylesheet">
		<link href="assets/css/responsive.css" rel="stylesheet">
	</head>

	<body>
		<div class="wrapper">
			<!-- header -->
			<header class="main-header">
				<div class="container_header">
					<div class="logo d-flex align-items-center">
						<a href="#"> <strong class="logo_icon"> <img src="assets/images/small-logo.png" alt=""> </strong> <span class="logo-default"> <img src="assets/images/logo2.png" alt=""> </span> </a>
						<div class="icon_menu full_menu">
							<a href="#" class="menu-toggler sidebar-toggler"></a>
						</div>
					</div>
					<div class="right_detail">
						<div class="row d-flex align-items-center min-h pos-md-r">
							<div class="col-xl-5 col-3 search_col ">
								<div class="top_function">

									<div class="search">
										<a id="toggle_res_search" data-toggle="collapse" data-target="#search_form" class="res-only-view collapsed" href="javascript:void(0);"
										aria-expanded="false"> <i class=" icon-magnifier"></i> </a>
										<form id="search_form" role="search" class="search-form collapse" action="#">
											<div class="input-group">
												<input type="text" class="form-control" placeholder="Search...">
												<button type="button" class="btn" data-target="#search_form" data-toggle="collapse" aria-label="Close">
													<i class="ion-android-search"></i>
												</button>
											</div>
										</form>
									</div>
								</div>
							</div>
							<div class="col-xl-7 col-9 d-flex justify-content-end">
								<div class="right_bar_top d-flex align-items-center">

									<!-- notification_Start -->
									<div class="dropdown dropdown-notification">
										<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="false"> <i class="fa fa-bell-o"></i> <span class="badge_coun"> 6 </span> </a>
										<ul class="dropdown-menu scroll_auto height_fixed" aria-labelledby="dropdownMenu1">
											<li class="bigger">
												<h3><span class="bold">Notifications</span></h3>
												<span class="notification-label">New 6</span>
											</li>
											<li>
												<ul class="dropdown-menu-list">
													<li>
														<a href="javascript:;"> <span class="time">just now</span> <span class="details"> <span class="notification-icon deepPink-bgcolor"> <i class="fa fa-check"></i> </span> Congratulations!. </span> </a>
													</li>
													<li>
														<a href="javascript:;"> <span class="time">3 mins</span> <span class="details"> <span class="notification-icon purple-bgcolor"> <i class="fa fa-user o"></i> </span> <b>John Micle </b>is now following you. </span> </a>
													</li>
													<li>
														<a href="javascript:;"> <span class="time">7 mins</span> <span class="details"> <span class="notification-icon blue-bgcolor"> <i class="fa fa-comments-o"></i> </span> <b>Sneha Jogi </b>sent you a message. </span> </a>
													</li>
													<li>
														<a href="javascript:;"> <span class="time">12 mins</span> <span class="details"> <span class="notification-icon pink"> <i class="fa fa-heart"></i> </span> <b>Ravi Patel </b>like your photo. </span> </a>
													</li>
													<li>
														<a href="javascript:;"> <span class="time">15 mins</span> <span class="details"> <span class="notification-icon yellow"> <i class="fa fa-warning"></i> </span> Warning! </span> </a>
													</li>
													<li>
														<a href="javascript:;"> <span class="time">10 hrs</span> <span class="details"> <span class="notification-icon red"> <i class="fa fa-times"></i> </span> Application error. </span> </a>
													</li>
												</ul>
											</li>
										</ul>
									</div>
									<!-- notification_End -->
									<!-- DropDown_Inbox -->
									<div class="dropdown dropdown-inbox">
										<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true"> <i class="fa fa-envelope-o"></i> <span class="badge_coun"> 2 </span> </a>
										<ul class="dropdown-menu scroll_auto height_fixed" aria-labelledby="dropdownMenu1">
											<li class="bigger">
												<h3><span class="bold">Messages</span></h3>
												<span class="notification-label">New 2</span>
											</li>
											<li>
												<ul class="dropdown-menu-list">
													<li>
														<a href="#"> <span class="photo"> <img src="assets/images/about-1.jpg" class="img-circle" alt=""> </span> <span class="subject"> <span class="from"> Sarah Smith </span> <span class="time">Just Now </span> </span> <span class="message"> Jatin I found you on LinkedIn... </span> </a>
													</li>
													<li>
														<a href="#"> <span class="photo"> <img src="assets/images/about-1.jpg" class="img-circle" alt=""> </span> <span class="subject"> <span class="from"> Sarah Smith </span> <span class="time">Just Now </span> </span> <span class="message"> Jatin I found you on LinkedIn... </span> </a>
													</li>
													<li>
														<a href="#"> <span class="photo"> <img src="assets/images/about-1.jpg" class="img-circle" alt=""> </span> <span class="subject"> <span class="from"> Sarah Smith </span> <span class="time">Just Now </span> </span> <span class="message"> Jatin I found you on LinkedIn... </span> </a>
													</li>
													<li>
														<a href="#"> <span class="photo"> <img src="assets/images/about-1.jpg" class="img-circle" alt=""> </span> <span class="subject"> <span class="from"> Sarah Smith </span> <span class="time">Just Now </span> </span> <span class="message"> Jatin I found you on LinkedIn... </span> </a>
													</li>
													<li>
														<a href="#"> <span class="photo"> <img src="assets/images/about-1.jpg" class="img-circle" alt=""> </span> <span class="subject"> <span class="from"> Sarah Smith </span> <span class="time">Just Now </span> </span> <span class="message"> Jatin I found you on LinkedIn... </span> </a>
													</li>
													<li>
														<a href="#"> <span class="photo"> <img src="assets/images/about-1.jpg" class="img-circle" alt=""> </span> <span class="subject"> <span class="from"> Sarah Smith </span> <span class="time">Just Now </span> </span> <span class="message"> Jatin I found you on LinkedIn... </span> </a>
													</li>
												</ul>
											</li>
										</ul>
									</div>
									<!--DropDown_Inbox_End -->
									<!-- Dropdown_User -->
									<div class="dropdown dropdown-user">
										<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="true"> <img class="img-circle pro_pic" src="assets/images/about-1.jpg" alt=""> </a>
										<ul class="dropdown-menu dropdown-menu-default">
											<li>
												<a href="#"> <i class="icon-user"></i> Profile </a>
											</li>
											<li>
												<a href="#"> <i class="icon-settings"></i> Settings </a>
											</li>
											<li>
												<a href="#"> <i class="icon-directions"></i> Help </a>
											</li>
											<li class="divider"></li>
											<li>
												<a href="lock_screen.html"> <i class="icon-lock"></i> Lock </a>
											</li>
											<li>
												<a href="#"> <i class="icon-logout"></i> Log Out </a>
											</li>
										</ul>
									</div>
									<!-- Dropdown_User_End -->
								</div>
							</div>
						</div>
					</div>
				</div>

			</header>
			<!-- header_End -->
			<!-- Content_right -->
			<div class="container_full">

				<div class="side_bar scroll_auto">
                <div class="user-panel">
						<div class="user_image">
							<img src="assets/images/about-1.jpg" class="img-circle mCS_img_loaded" alt="User Image">
						</div>
						<div class="info">
							<p>
								Alexander Pierce
							</p>
							<a href="#"> <i class="fa fa-circle text-success"></i> Online</a>
						</div>
					</div>

					<ul id="dc_accordion" class="sidebar-menu tree">
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-home"></i> <span>Dashboard</span> 
							<span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="index.html">Dashboard 1</a>
								</li>
								<li>
									<a href="index1.html">Dashboard 2</a>
								</li>
								<li>
									<a href="index2.html">E-Commerce</a>
								</li>
								<li>
									<a href="index3.html">Analysis</a>
								</li>
								
								<li>
									<a href="index-green.html">Dashboard Green</a>
								</li>
								<li>
									<a href="index-orange.html">Dashboard Orange</a>
								</li>
								<li>
									<a href="index-purple.html">Dashboard Purple</a>
								</li>
								<li>
									<a href="index-red.html">Dashboard Red</a>
								</li>
								</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-newspaper-o"></i> <span>UI Elements </span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="alert.html">Alerts</a>
								</li>
								<li>
									<a href="buttons.html">Buttons</a>
								</li>
								<li>
									<a href="cards.html">Cards</a>
								</li>
								<li>
									<a href="dropdown.html">Dropdowns</a>
								</li>
								<li>
									<a href="grid.html">Grids</a>
								</li>
								<li>
									<a href="lists.html">Lists</a>
								</li>
								<li>
									<a href="modal.html">Modals</a>
								</li>
								<li>
									<a href="progress.html"> Progress</a>
								</li>
								<li>
									<a href="popover-tooltips.html">Popover &amp; Tooltips</a>
								</li>
								<li>
									<a href="typography.html">Typography</a>
								</li>
								<li>
									<a href="tabs.html">Tabs</a>
								</li>
								<li>
									<a href="tree.html">Tree</a>
								</li>
								<li>
									<a href="toastr.html">Toastr Notification</a>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-pie-chart"></i> <span>Portlets</span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="portlet-base.html">Portlets Base</a>
								</li>
								<li>
									<a href="portlet-advanced.html">Portlets Advanced</a>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-laptop"></i> <span>Icons</span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="icon-font-awesome.html">Fontawesome Icons</a>
								</li>
								<li>
									<a href="icon-simple-line.html">Simple line Icons</a>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-table"></i> <span>Widgets </span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="widgets-base.html">Widgets Base</a>
								</li>
								<li>
									<a href="widgets-chart.html">Widgets Chart</a>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-calendar"></i> <span>Calendar </span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="calendar-basic.html">Basic Calendar</a>
								</li>
								<li>
									<a href="calendar-external-events.html">External Events Calendar</a>
								</li>
								<li>
									<a href="calendar-list.html">List Calendar</a>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-wpforms"></i> <span>Forms</span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li class="menu_sub">
									<a href="#">Form Control <span class="arrow"></span> </a>
									<ul class="down_menu lavel3">
										<li>
											<a href="form-basic-input.html">Basic Input</a>
										</li>
										<li>
											<a href="form-input-group.html">Input Group</a>
										</li>
										<li>
											<a href="form-checkbox-radio.html">Checkbox & Radio</a>
										</li>
									</ul>
								</li>
								<li class="menu_sub">
									<a href="#">Form Validation <span class="arrow"></span> </a>
									<ul class="down_menu lavel3">
										<li>
											<a href="form-validation-basic.html">Basic Validation</a>
										</li>
										<li>
											<a href="form-validation-jquery.html">jQuery Validation</a>
										</li>
										<li>
											<a href="form-wizard.html">Form Wizard</a>
										</li>
									</ul>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="icon-grid"></i> <span>Data Tables</span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="table-basic.html">Basic Table</a>
								</li>
								<li class="menu_sub">
									<a href="#">Data Tables <span class="arrow"></span> </a>
									<ul class="down_menu">
										<li>
											<a href="table-datatable.html">Basic Datatable</a>
										</li>
										<li>
											<a href="table-datatable-show-hide.html">Toggle Col Datatable</a>
										</li>
										<li>
											<a href="table-datatable-ajax.html">Ajax Datatable</a>
										</li>
									</ul>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-bar-chart text-aqua"></i> <span>Charts</span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="flot-chart.html">Flot Charts</a>
								</li>
								<li>
									<a href="echart.html">eCharts</a>
								</li>
								<li>
									<a href="morris-chart.html">Morris Charts</a>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-file text-aqua"></i> <span>Extra Pages</span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="profile.html">User Profile</a>
								</li>
								<li>
									<a href="page-login.html">Sign In</a>
								</li>
								<li>
									<a href="page-register.html">Sign Up</a>
								</li>
								<li>
									<a href="invoice.html">Invoice</a>
								</li>
								<li>
									<a href="page_404.html">404</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>

				<!--main contents start-->
				<main class="content_wrapper">
					<!--page title start-->
					<div class="page-heading">
						<div class="container-fluid">
							<div class="row d-flex align-items-center">
								<div class="col-md-6">
									<div class="page-breadcrumb">
										<h1>Tabs Page</h1>
									</div>
								</div>
								<div class="col-md-6 justify-content-md-end d-md-flex">
									<div class="breadcrumb_nav">
										<ol class="breadcrumb">
											<li>
												<i class="fa fa-home"></i>
												<a class="parent-item" href="index.html">Home</a>
												<i class="fa fa-angle-right"></i>
											</li>
											<li class="active">
												Tabs Page
											</li>
										</ol>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!--page title end-->

					<div class="container-fluid">

						<!-- state start-->
						<div class="row">
							<div class="col-xl-6">
								<div class="card card-shadow mb-4">
									<div class="card-header">
										<div class="card-title">
											Default
										</div>
									</div>
									<div class="card-body">
										<ul class="nav nav-tabs mb-4" role="tablist">
											<li class="nav-item">
												<a class="nav-link active" data-toggle="tab" href="#tab_1">Active</a>
											</li>
											<li class="nav-item dropdown">
												<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
												<div class="dropdown-menu">
													<a class="dropdown-item" data-toggle="tab" href="#tab_2">Action</a>
													<a class="dropdown-item" data-toggle="tab" href="#tab_2-1">Another action</a>
													<a class="dropdown-item" data-toggle="tab" href="#tab_2-2">Something else here</a>
													<div class="dropdown-divider"></div>
													<a class="dropdown-item" data-toggle="tab" href="#tab_2-3">Separated link</a>
												</div>
											</li>
											<li class="nav-item">
												<a class="nav-link" data-toggle="tab" href="#tab_3">Link</a>
											</li>
											<li class="nav-item">
												<a class="nav-link disabled" data-toggle="tab" href="#tab_4">Disabled</a>
											</li>
										</ul>

										<div class="tab-content">
											<div class="tab-pane active" id="tab_1" role="tabpanel">
												Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is
												an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire
												app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins
												built on jQuery.
											</div>
											<div class="tab-pane" id="tab_2" role="tabpanel">
												Include Bootstrap's source Sass and JavaScript files via npm, Composer or Meteor. Package managed installs don't include
												documentation, but do include our build system and readme.
											</div>
											<div class="tab-pane" id="tab_3" role="tabpanel">
												Take Bootstrap 4 to the next level with official premium themes—toolkits built on Bootstrap with new components and plugins,
												docs, and build tools.
											</div>
											<div class="tab-pane" id="tab_4" role="tabpanel">
												We’ve done our best to prevent breaking changes, but we had to sneak some in. Regrettably, we’ll also have a few more coming
												in Beta 3, too. However, we’re clearly outlining all of them for you to make the upgrade and testing process as
												easy as possible.
											</div>
										</div>
									</div>
								</div>
								<div class="card card-shadow mb-4">
									<div class="card-header">
										<div class="card-title">
											Iconic
										</div>
									</div>
									<div class="card-body">
										<ul class="nav nav-tabs mb-4" role="tablist">
											<li class="nav-item">
												<a class="nav-link active" data-toggle="tab" href="#tab-i_1"> <i class="fa fa-home pr-2"></i> Active</a>
											</li>
											<li class="nav-item dropdown">
												<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-gift pr-2"></i> Dropdown</a>
												<div class="dropdown-menu">
													<a class="dropdown-item" data-toggle="tab" href="#tab-i_2">Action</a>
													<a class="dropdown-item" data-toggle="tab" href="#tab-i_2-1">Another action</a>
													<a class="dropdown-item" data-toggle="tab" href="#tab-i_2-2">Something else here</a>
													<div class="dropdown-divider"></div>
													<a class="dropdown-item" data-toggle="tab" href="#tab-i_2-3">Separated link</a>
												</div>
											</li>
											<li class="nav-item">
												<a class="nav-link" data-toggle="tab" href="#tab-i_3"> <i class="fa fa-ambulance pr-2"></i> Link</a>
											</li>
											<li class="nav-item">
												<a class="nav-link disabled" data-toggle="tab" href="#tab-i_4"> <i class="fa fa-recycle pr-2"></i> Disabled</a>
											</li>
										</ul>

										<div class="tab-content">
											<div class="tab-pane active" id="tab-i_1" role="tabpanel">
												Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is
												an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire
												app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins
												built on jQuery.
											</div>
											<div class="tab-pane" id="tab-i_2" role="tabpanel">
												Include Bootstrap's source Sass and JavaScript files via npm, Composer or Meteor. Package managed installs don't include
												documentation, but do include our build system and readme.
											</div>
											<div class="tab-pane" id="tab-i_3" role="tabpanel">
												Take Bootstrap 4 to the next level with official premium themes—toolkits built on Bootstrap with new components and plugins,
												docs, and build tools.
											</div>
											<div class="tab-pane" id="tab-i_4" role="tabpanel">
												We’ve done our best to prevent breaking changes, but we had to sneak some in. Regrettably, we’ll also have a few more coming
												in Beta 3, too. However, we’re clearly outlining all of them for you to make the upgrade and testing process as
												easy as possible.
											</div>
										</div>
									</div>
								</div>
								<div class="card card-shadow mb-4">
									<div class="card-header">
										<div class="card-title">
											Justified
										</div>
									</div>
									<div class="card-body">
										<ul class="nav nav-tabs nav-fill mb-4" role="tablist">
											<li class="nav-item">
												<a class="nav-link active" data-toggle="tab" href="#tab-j_1"> <i class="fa fa-home pr-2"></i> Tab 1</a>
											</li>

											<li class="nav-item">
												<a class="nav-link" data-toggle="tab" href="#tab-j_2"> Tab 2</a>
											</li>

											<li class="nav-item">
												<a class="nav-link" data-toggle="tab" href="#tab-j_3"> Tab 3</a>
											</li>

										</ul>

										<div class="tab-content">
											<div class="tab-pane active" id="tab-j_1" role="tabpanel">
												Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is
												an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire
												app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins
												built on jQuery.
											</div>
											<div class="tab-pane" id="tab-j_2" role="tabpanel">
												Include Bootstrap's source Sass and JavaScript files via npm, Composer or Meteor. Package managed installs don't include
												documentation, but do include our build system and readme.
											</div>
											<div class="tab-pane" id="tab-j_3" role="tabpanel">
												Take Bootstrap 4 to the next level with official premium themes—toolkits built on Bootstrap with new components and plugins,
												docs, and build tools.
											</div>

										</div>
									</div>
								</div>
							</div>
							<div class="col-xl-6">
								<div class="card card-shadow mb-4">
									<div class="card-header">
										<div class="card-title">
											Pills
										</div>
									</div>
									<div class="card-body">
										<ul class="nav nav-pills mb-4" role="tablist">
											<li class="nav-item">
												<a class="nav-link active" data-toggle="tab" href="#tab-p_1">Tab 1</a>
											</li>
											<li class="nav-item">
												<a class="nav-link" data-toggle="tab" href="#tab-p_2">Tab 2</a>
											</li>
											<li class="nav-item">
												<a class="nav-link" data-toggle="tab" href="#tab-p_3">Tab 3</a>
											</li>
											<li class="nav-item">
												<a class="nav-link disabled" data-toggle="tab" href="#tab-p_4">Disabled</a>
											</li>
										</ul>

										<div class="tab-content">
											<div class="tab-pane active" id="tab-p_1" role="tabpanel">
												Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is
												an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire
												app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins
												built on jQuery.
											</div>
											<div class="tab-pane" id="tab-p_2" role="tabpanel">
												Include Bootstrap's source Sass and JavaScript files via npm, Composer or Meteor. Package managed installs don't include
												documentation, but do include our build system and readme.
											</div>
											<div class="tab-pane" id="tab-p_3" role="tabpanel">
												Take Bootstrap 4 to the next level with official premium themes—toolkits built on Bootstrap with new components and plugins,
												docs, and build tools.
											</div>
											<div class="tab-pane" id="tab-p_4" role="tabpanel">
												We’ve done our best to prevent breaking changes, but we had to sneak some in. Regrettably, we’ll also have a few more coming
												in Beta 3, too. However, we’re clearly outlining all of them for you to make the upgrade and testing process as
												easy as possible.
											</div>
										</div>
									</div>
								</div>
								<div class="card card-shadow mb-4">
									<div class="card-header">
										<div class="card-title">
											Iconic
										</div>
									</div>
									<div class="card-body">
										<ul class="nav nav-pills nav-pills-success mb-4" role="tablist">
											<li class="nav-item">
												<a class="nav-link active" data-toggle="tab" href="#tab-p-i_1"> <i class="icon-compass pr-2"></i> Tab 1</a>
											</li>
											<li class="nav-item">
												<a class="nav-link" data-toggle="tab" href="#tab-p-i_2"> <i class="icon-anchor pr-2"></i>Tab 2</a>
											</li>
											<li class="nav-item">
												<a class="nav-link" data-toggle="tab" href="#tab-p-i_3"> <i class="icon-badge pr-2"></i>Tab 3</a>
											</li>
											<li class="nav-item">
												<a class="nav-link disabled" data-toggle="tab" href="#tab-p-i_4"> <i class="icon-chart pr-2"></i>Disabled</a>
											</li>
										</ul>

										<div class="tab-content">
											<div class="tab-pane active" id="tab-p-i_1" role="tabpanel">
												Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is
												an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire
												app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins
												built on jQuery.
											</div>
											<div class="tab-pane" id="tab-p-i_2" role="tabpanel">
												Include Bootstrap's source Sass and JavaScript files via npm, Composer or Meteor. Package managed installs don't include
												documentation, but do include our build system and readme.
											</div>
											<div class="tab-pane" id="tab-p-i_3" role="tabpanel">
												Take Bootstrap 4 to the next level with official premium themes—toolkits built on Bootstrap with new components and plugins,
												docs, and build tools.
											</div>
											<div class="tab-pane" id="tab-p-i_4" role="tabpanel">
												We’ve done our best to prevent breaking changes, but we had to sneak some in. Regrettably, we’ll also have a few more coming
												in Beta 3, too. However, we’re clearly outlining all of them for you to make the upgrade and testing process as
												easy as possible.
											</div>
										</div>
									</div>
								</div>
								<div class="card card-shadow mb-4">
									<div class="card-header">
										<div class="card-title">
											Justified
										</div>
									</div>
									<div class="card-body">
										<ul class="nav nav-pills nav-fill nav-pills-inverse mb-4" role="tablist">
											<li class="nav-item">
												<a class="nav-link active" data-toggle="tab" href="#tab-p-j_1"> <i class="icon-compass pr-2"></i> Tab 1</a>
											</li>
											<li class="nav-item">
												<a class="nav-link" data-toggle="tab" href="#tab-p-j_2"> <i class="icon-anchor pr-2"></i>Tab 2</a>
											</li>
											<li class="nav-item">
												<a class="nav-link" data-toggle="tab" href="#tab-p-j_3"> <i class="icon-badge pr-2"></i>Tab 3</a>
											</li>

										</ul>

										<div class="tab-content">
											<div class="tab-pane active" id="tab-p-j_1" role="tabpanel">
												Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is
												an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire
												app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins
												built on jQuery.
											</div>
											<div class="tab-pane" id="tab-p-j_2" role="tabpanel">
												Include Bootstrap's source Sass and JavaScript files via npm, Composer or Meteor. Package managed installs don't include
												documentation, but do include our build system and readme.
											</div>
											<div class="tab-pane" id="tab-p-ji_3" role="tabpanel">
												Take Bootstrap 4 to the next level with official premium themes—toolkits built on Bootstrap with new components and plugins,
												docs, and build tools.
											</div>

										</div>
									</div>
								</div>
							</div>

							<div class="col-md-12">
								<div class="card card-shadow mb-4">
									<div class="card-header">
										<div class="card-title">
											Different Colors Tabs
										</div>
									</div>
									<div class="card-body">
										<ul class="nav nav-pills nav-pills-info mb-4" role="tablist">
											<li class="nav-item">
												<a class="nav-link active" data-toggle="tab" href="#tab-p-info_1"> <i class="icon-compass pr-2"></i> Tab 1</a>
											</li>
											<li class="nav-item">
												<a class="nav-link" data-toggle="tab" href="#tab-p-info_2"> <i class="icon-anchor pr-2"></i>Tab 2</a>
											</li>
											<li class="nav-item">
												<a class="nav-link" data-toggle="tab" href="#tab-p-info_3"> <i class="icon-badge pr-2"></i>Tab 3</a>
											</li>

										</ul>

										<div class="tab-content">
											<div class="tab-pane active" id="tab-p-info_1" role="tabpanel">
												Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is
												an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire
												app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins
												built on jQuery.
											</div>
											<div class="tab-pane" id="tab-p-info_2" role="tabpanel">
												Include Bootstrap's source Sass and JavaScript files via npm, Composer or Meteor. Package managed installs don't include
												documentation, but do include our build system and readme.
											</div>
											<div class="tab-pane" id="tab-p-info_3" role="tabpanel">
												Take Bootstrap 4 to the next level with official premium themes—toolkits built on Bootstrap with new components and plugins,
												docs, and build tools.
											</div>

										</div>
									</div>

									<div class="card-body">
										<ul class="nav nav-pills nav-pills-danger mb-4" role="tablist">
											<li class="nav-item">
												<a class="nav-link active" data-toggle="tab" href="#tab-p-danger_1"> <i class="icon-compass pr-2"></i> Tab 1</a>
											</li>
											<li class="nav-item">
												<a class="nav-link" data-toggle="tab" href="#tab-p-danger_2"> <i class="icon-anchor pr-2"></i>Tab 2</a>
											</li>
											<li class="nav-item">
												<a class="nav-link" data-toggle="tab" href="#tab-p-danger_3"> <i class="icon-badge pr-2"></i>Tab 3</a>
											</li>

										</ul>

										<div class="tab-content">
											<div class="tab-pane active" id="tab-p-danger_1" role="tabpanel">
												Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is
												an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire
												app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins
												built on jQuery.
											</div>
											<div class="tab-pane" id="tab-p-danger_2" role="tabpanel">
												Include Bootstrap's source Sass and JavaScript files via npm, Composer or Meteor. Package managed installs don't include
												documentation, but do include our build system and readme.
											</div>
											<div class="tab-pane" id="tab-p-danger_3" role="tabpanel">
												Take Bootstrap 4 to the next level with official premium themes—toolkits built on Bootstrap with new components and plugins,
												docs, and build tools.
											</div>

										</div>
									</div>

									<div class="card-body">
										<ul class="nav nav-pills nav-pills-warning mb-4" role="tablist">
											<li class="nav-item">
												<a class="nav-link active" data-toggle="tab" href="#tab-p-warning_1"> <i class="icon-compass pr-2"></i> Tab 1</a>
											</li>
											<li class="nav-item">
												<a class="nav-link" data-toggle="tab" href="#tab-p-warning_2"> <i class="icon-anchor pr-2"></i>Tab 2</a>
											</li>
											<li class="nav-item">
												<a class="nav-link" data-toggle="tab" href="#tab-p-warning_3"> <i class="icon-badge pr-2"></i>Tab 3</a>
											</li>

										</ul>

										<div class="tab-content">
											<div class="tab-pane active" id="tab-p-warning_1" role="tabpanel">
												Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is
												an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire
												app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins
												built on jQuery.
											</div>
											<div class="tab-pane" id="tab-p-warning_2" role="tabpanel">
												Include Bootstrap's source Sass and JavaScript files via npm, Composer or Meteor. Package managed installs don't include
												documentation, but do include our build system and readme.
											</div>
											<div class="tab-pane" id="tab-p-warning_3" role="tabpanel">
												Take Bootstrap 4 to the next level with official premium themes—toolkits built on Bootstrap with new components and plugins,
												docs, and build tools.
											</div>

										</div>
									</div>

								</div>
							</div>
						</div>

						<!-- state end-->

					</div>
				</main>
				<!--main contents end-->

			</div>
			<!-- Content_right_End -->
			<!-- Footer -->
			<footer class="footer ptb-20">
				<div class="row">
					<div class="col-md-12 text-center">
						<div class="copy_right">
							<p>
								2018 © Dashboard Theme By
								<a href="http://www.17sucai.com/">Jeparo</a>
							</p>
						</div>
						<a id="back-to-top" href="#"> <i class="ion-android-arrow-up"></i> </a>
					</div>
				</div>
			</footer>
			<!-- Footer_End -->
		</div>
		<script type="text/javascript" src="assets/js/jquery.min.js"></script>
		<script type="text/javascript" src="assets/js/popper.min.js"></script>
		<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="assets/js/jquery.mCustomScrollbar.concat.min.js"></script>
		<script type="text/javascript" src="assets/js/jquery.dcjqaccordion.2.7.js"></script>
		<script src="assets/js/custom.js" type="text/javascript"></script>
	</body>

</html>
